<template>
	<view class="container">
		
		<uni-nav-bar title="琅琊严选" fixed="true"  color="#fff" backgroundColor="#353535"></uni-nav-bar>
		<view class="search">
			<view class="input" @tap="gosearch">
				<image class="icon"></image>
				<text class="txt">商品搜索</text>
			</view>
			<!-- <navigator url="/pages/search/search" class="input">
				<image class="icon"></image>
				<text class="txt">商品搜索</text>
			</navigator> -->
		</view>
	
		<view class="navitab">
			<view class="navi-item" v-for="(item,index) in statusType" :key="index" @tap="tapchange"  :data-cateindex="index" :data-status="item.status">
		        <view :class="'label'+ (item.status == status ? 'active' : '')" >{{item.label}}</view>
				<view class="line" v-show="(item.status == status)" ></view>
			</view>
		</view>
		
		<swiper class="banner" indicator-dots="true" indicator-color="rgba( 0, 0, 0, 0.6)" indicator-active-color="rgba( 0, 0, 0, 0.5)"
		 circular="true" autoplay="true" interval="3000" duration="1000" v-if="banner.length > 0">
			<swiper-item v-for="(item, index) in banner" :key="index">
				<navigator :url="item.url">
					<image v-if="(status == -1)" :src="item.pic" mode="aspectFit" background-size="cover"></image>
					<image v-else :src="item" mode="aspectFit" background-size="cover"></image>
				</navigator>
			</swiper-item>
		</swiper>
		

		<view class="m-menu" v-if="(status == -1)">
			<view class="item">
				<navigator url="/pages/topic/topic" class="item-navi" hover-class="none">
					<image src="/static/static/images/menu1.png" style="height:50rpx;width:35rpx;" background-size="cover"></image>
					<text>琅琊测评</text>
				</navigator>
			</view>
			<view class="item">
				<navigator url="/pages/map/map" class="item-navi" hover-class="none">
					<image src="/static/static/images/menu2.png" style="height:50rpx;width:41rpx;" background-size="cover"></image>
					<text>地图查找</text>
				</navigator>
			</view>
			<view class="item">
				<navigator url="/pages/vr/index/index" class="item-navi" style="padding-top:16rpx;" hover-class="none">
					<image src="/static/static/images/menu3.png" style="height:31rpx;width:50rpx;" background-size="cover"></image>
					<text>VR实景</text>
				</navigator>
			</view>
			<view class="item">
				<navigator url="/pages/vr/index/index" class="item-navi" hover-class="none">
					<image src="/static/static/images/menu4.png" style="height:51rpx;width:35rpx;" background-size="cover"></image>
					<text>直播live</text>
				</navigator>
			</view>
		</view>

		<view class="topic"  v-if="(status == -1)">
			<view class="topic-title">专题</view>
			<swiper class="topic-swiper" display-multiple-items="2" circular="true" next-margin="50rpx">
				<swiper-item class="item" next-margin="50rpx" circular="true">
					<!-- <view class="text">
						<view class="name">能净化空气的加湿器</view>
						<view class="jiang">获红点、好设计大奖</view>
					</view> -->
					<image src="/static/static/images/topic1.png"></image>
				</swiper-item>
				<swiper-item class="item" next-margin="50rpx">
					<!-- <view class="text">
						<view class="name">能净化空气的加湿器</view>
						<view class="jiang">获红点、好设计大奖</view>
					</view> -->
					<image src="/static/static/images/topic2.png"></image>
				</swiper-item>
				<swiper-item class="item" next-margin="50rpx">
					<!-- <view class="text">
						<view class="name">能净化空气的加湿器</view>
						<view class="jiang">获红点、好设计大奖</view>
					</view> -->
					<image src="/static/static/images/topic1.png"></image>
				</swiper-item>
				<swiper-item class="item" next-margin="50rpx">
					<!-- <view class="text">
						<view class="name">能净化空气的加湿器</view>
						<view class="jiang">获红点、好设计大奖</view>
					</view> -->
					<image src="/static/static/images/topic2.png"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="a-section a-brand">
			<view class="h">
				<!-- <navigator url="../brand/brand"> -->
				<text class="txt">推荐</text>
				<!-- </navigator> -->
			</view>
			<view class="Index">
				<!-- 瀑布流布局列表 -->
				<view class="pubuBox">
					<view class="pubuItem">
						<view class="item-masonry"  v-for="(item, index) in goods" :key="index" @tap="goGoodsDetail" :data-id="item.id">
							<view style="height:330rpx; width:333rpx; border-top-left-radius: 15rpx; border-top-right-radius:15rpx;background-color: #fafafa; position:absolute;"></view>
							<image :src="item.pic" mode="widthFix" style="height:330rpx;mix-blend-mode: multiply; "></image>
							<view class="listtitle">
								<view class="listtitle1">{{ item.name }}</view>
								<!-- <view class="listtitle3">买过的商品</view> -->
								<view class="listtitle2">
									<view class="listtitle2name">{{ item.brandName }}</view>
									<view class="listtitle2hot">
										<image class="listtitle2son" src="/static/static/images/hot.png"></image>
										<view class="listtitle2num">{{ item.hot }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	
	const util = require("../../utils/util.js");
	const api = require("../../config/api.js"); //获取应用实例
	// //获取应用实例
	const app = getApp();

	export default {
		components: {uniNavBar},

		data() {
			return {
				statusType: [{
				  status: -1,
				  label: '首页'
				}, {
				  status: 0,
				  label: '美妆'
				}, {
				  status: 1,
				  label: '食品'
				}, {
				  status: 2,
				  label: '日用品'
				}, {
				  status: 3,
				  label: '小家电'
				}],
				status: -1,
				brands: [],
				banner: [],
				channel: [],
				swiperH: '450rpx',
				pageNo: 1,
				pageSize: 10,
				goods: [],
				nowIdx: "",
				brand: "",
				isNewRenderDone: false //锁的作用
			};
		},

		props: {},
		onShareAppMessage: function(res) {
			return {
				title: '琅琊严选',
				path: '/pages/index/index'
			};
		},
		
		onLoad: function(options) {
			this.loadData();
		},
		onPullDownRefresh: function () {
		    uni.showNavigationBarLoading() //在标题栏中显示加载
		    this.loadData();
		    //模拟加载
		    setTimeout(function () {
		      // complete
		      uni.hideNavigationBarLoading() //完成停止加载
		      uni.stopPullDownRefresh() //停止下拉刷新
		    }, 1500);
		  },
		methods: {
			gosearch: function(){
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			tapchange:function(e){
				let that=this;
				const status = e.currentTarget.dataset.status;
				 let cateindex = e.currentTarget.dataset.cateindex-1;
				that.status = status;
				// this.loadData();
				if(status == -1){
					that.loadData();
				}else{
				let ids=[];
				that.channel.map((ele)=>{				
					ids.push(ele.id);					
				});
				let cateid = ids[cateindex];
				console.log(ids[cateindex]);
				util.request(api.CatalogCurrent, {id:cateid}).then(function(res){
					if (res.errno == 0) {
					  that.goods = res.data;
					}
					uni.hideLoading();
				})
				that.banner = that.channel[cateindex].albumPics.split(",");	
				console.log(JSON.stringify(that.banner))
				}
				
				//this.loadData();
				
			},
			getIndexData: function() {
				let that = this;
				util.request(api.IndexUrl).then(function(res) {
					if (res.errno == 0) {
						that.setData({
							brand: res.data.brandList,
							banner: res.data.advertiseList,
							channel: res.data.categories
						});
					}
				});
			},
			getProductsData: function() {
				let that = this;
				console.log("pageNo==" + that.pageNo);
				uni.showLoading({
					title: '加载中...'
				})
				util.request(api.GoodsList, {
					pageNo: that.pageNo,
					pageSize: that.pageSize
				}).then(function(res) {
					if (res.errno == 0) {
						uni.hideLoading()
						that.goods = that.goods.concat(res.data.records)
						that.pageNo = that.pageNo + 1
						if (res.data.records.length < that.pageSize) {
							that.isNewRenderDone = false
						} else {
							that.isNewRenderDone = true
						}
					} else {
						that.isNewRenderDone = false
					}


				});
			},
			loadData: function() {
				let that = this;
				that.pageNo = 1
				that.goods = [];
				//#ifdef MP-WEIXIN
				util.getSetting().then(function(res) {
					// console.log("==weixin loadData==location address==" + JSON.stringify(res));
					that.getIndexData();
					that.getProductsData();
				});
				//#endif
				//#ifndef MP-WEIXIN
				// console.log("==no weixin loadData==");
				that.getIndexData();
				that.getProductsData();
				//#endif
			},

			onReachBottom() {
				console.log('onReachBottom');
				// 加锁，避免在加载更多时用户频繁下拉导致的重复触发而渲染异常
				if (!this.isNewRenderDone) return;
				this.isNewRenderDone = false
				// 模拟分页请求 (加载更多)
				this.getProductsData();
			},
			/**
			 * 跳转分类
			 */
			goCatalog(e) {
				app.globalData.categoryId = e.currentTarget.dataset.id;
				uni.switchTab({
					url: '/pages/catalog/catalog',
				});

			},
			/**
			 * 跳转商品详情
			 */
			goGoodsDetail(e) {
				uni.navigateTo({
					url: '/pages/goods/goods?id=' + e.currentTarget.dataset.id,
				})
			},

		}
	};
</script>
<style>
	*{
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	.container {
		background: #f1f1f1;
		top: 0;
	}
	.search {
		height: 110rpx;
		width: 100%;
		padding: 0 30rpx;
		background: #353535;
		display: flex;
		align-items: center;
		position: fixed;
		z-index: 100;
		top: 126rpx;
	}
	.search .input {
		width: 690rpx;
		height: 50rpx;
		background: #ededed;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: left;
	}

	.search .icon {
		background: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png") center no-repeat;
		background-size: 100%;
		width: 28rpx;
		height: 28rpx;
		margin-left: 20rpx;
	}

	.search .txt {
		height: 42rpx;
		line-height: 42rpx;
		color: #b2b2b2;
		padding-left: 12rpx;
		font-size: 24rpx;
	}

	.navitab {
		position: fixed;
		top: 234rpx;
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		display: flex;
		justify-content: space-around;
		z-index: 100;
		background: #f1f1f1;
	}
	.navitab .navi-item{
		line-height:90rpx;
	}
	.navitab .navi-item .label{
		font-size: 26rpx;
		color: #353535;
		line-height:76rpx;
	}
	.navitab .navi-item .line{
		height:6rpx;
		width:30rpx;
		background:#b28850;
		border-top-left-radius:6rpx;
		border-top-right-radius:6rpx;
		margin: 0rpx auto 10rpx auto;
	}
	.navitab .navi-item .labelactive {
		font-size: 30rpx;
		font-weight: bold;
		color: #b28850;
		line-height:76rpx;
	}

	.banner {
		margin-top: 200rpx;
		width:100%;
		height: 390rpx;
		margin-right: 30rpx;
		margin-left: 30rpx;
		padding-top:10rpx;
	}

	.banner image {
		width: 690rpx;
		height: 380rpx;
		
	}

	.m-menu {
		display: flex;
		margin-top: 50rpx;
		width: 750rpx;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx;
	}

	.m-menu .item {
		flex: 1;
	}

	.m-menu .item-navi {
		position: relative;
		height: 96rpx;
	}

	.m-menu .item-navi image {
		display: block;
		margin: 0 auto;
		margin-bottom: 12rpx;
	}

	.m-menu .item-navi text {
		position: absolute;
		bottom: 0;
		display: block;
		font-size: 24rpx;
		color: #333;
		width: 100%;
		text-align: center;
	}

	/*自定义轮播*/
	.topic {
		margin-top: 60rpx;
		padding: 0 30rpx;
	}

	.topic .topic-title {
		color: #353535;
		font-size: 36rpx;
		font-weight: bold;
	}

	.topic .topic-swiper {
		margin: 30rpx 0;
		height: 300rpx;
	}

	.topic .topic-swiper .item {
		margin-right: 20rpx;
		height: 300rpx;
		width: 300rpx;
		position: relative;
	}

	.topic .topic-swiper .item .text {
		position: absolute;
		z-index: 50;
	}

	.topic .topic-swiper .item .name {
		font-size: 26rpx;
		font-weight: bold;
	}

	.topic .topic-swiper .item .jiang {
		font-size: 24rpx;
	}

	.topic .topic-swiper .item image {
		position: absolute;
		top: 0;
		let: 0;
		height: 300rpx;
		width: 300rpx;
		border-radius: 12rpx;
	}


	.a-section {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		color: #333;
		padding: 30rpx 0;
	}

	.a-section .h {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: left;
		padding-left: 30rpx;
	}

	.a-section .h .txt {
		padding-right: 30rpx;
		background-size: 16.656rpx 27rpx;
		display: inline-block;
		height: 36rpx;
		font-size: 36rpx;
		line-height: 36rpx;
		font-weight: bold;
		color: #353535;
		/* margin: 30rpx 0; */
	}

	.a-section .h .title {
		padding-right: 30rpx;
		background-size: 16.656rpx 27rpx;
		display: inline-block;
		height: 36rpx;
		font-size: 36rpx;
		line-height: 36rpx;
		font-weight: bold;
		color: #353535;
		margin: 30rpx 0 0 0;
	}

	/* 瀑布流 */
	.pubuBox {
		padding: 30rpx;
	}

	.pubuItem {
		column-count: 2;
		column-gap: 30rpx;
	}

	.item-masonry {
		box-sizing: border-box;
		border-radius: 15rpx;
		overflow: hidden;
		background-color: #fff;
		break-inside: avoid;
		/*避免在元素内部插入分页符*/
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.item-masonry image {
		width: 100%;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
	}

	.listtitle {
		padding: 10rpx;
	}

	.listtitle .listtitle1 {
		line-height: 44rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		min-height: 28rpx;
		max-height: 88rpx;
		font-size: 28rpx;
		text-align: justify;
		text-justify: inter-cluster;
		word-break: break-all;
		word-wrap: break-word;
		word-spacing: -4rpx;
		letter-spacing: 0;
		
	}
	/* .listtitle .listtitle3{
		background: #fcf0e0;
		padding: auto 4rpx;
		border-radius: 4px;
		line-height: 30rpx;
		margin-top: 8rpx;
		margin-bottom: 8rpx;
		color:#ae864f;
		width:118rpx;
		font-size: 22rpx;
	} */
	.listtitle .listtitle2 {
		line-height: 22rpx;
		padding-top: 10rpx;
		display: flex;
		justify-content: space-between;	
	}
	.listtitle .listtitle2 .listtitle2name{
		color: #888888;
		font-size: 22rpx;
	}
	.listtitle .listtitle2 .listtitle2hot{
		display:flex;
		line-height: 24rpx;
		padding-bottom: 10rpx;
	}
	.listtitle .listtitle2 .listtitle2son {
		height: 24rpx;
		width: 21rpx;
	}
	.listtitle .listtitle2 .listtitle2num {
		font-size: 22rpx;
		color: #888888;
		padding-top:2rpx;
		padding-left: 4rpx;
	}
	.Index {
		width: 100%;
		height: 100%;
	}
	/* .a-brand .b {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		position: relative;
	}

	.a-brand .wrap {
		position: relative;
	}

	.a-brand .img {
		position: absolute;
		left: 0;
		top: 0;
	}

	.a-brand .mt {
		position: absolute;
		z-index: 2;
		padding: 27rpx 31rpx;
		left: 0;
		top: 0;
	}

	.a-brand .mt .brand {
		display: block;
		font-size: 33rpx;
		height: 43rpx;
		color: #333;
	}

	.a-brand .mt .price,
	.a-brand .mt .unit {
		font-size: 25rpx;
		color: #999;
	}

	.a-brand .item-1 {
		float: left;
		width: 375rpx;
		height: 252rpx;
		overflow: hidden;
		border-top: 1rpx solid #fff;
		margin-left: 1rpx;
	}

	.a-brand .item-1:nth-child(2n+1) {
		margin-left: 0;
		width: 374rpx;
	}

	.a-brand .item-1 .img {
		width: 375rpx;
		height: 253rpx;
	}

	.a-new .b {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		padding: 0 31rpx 45rpx 31rpx;
	}

	.a-new .b .item {
		float: left;
		width: 302rpx;
		margin-top: 10rpx;
		margin-left: 21rpx;
		margin-right: 21rpx;
	}

	.a-new .b .item-b {
		margin-left: 42rpx;
	}

	.a-new .b .img {
		width: 302rpx;
		height: 302rpx;
	}

	.a-new .b .name {
		text-align: center;
		display: block;
		width: 302rpx;
		height: 35rpx;
		margin-bottom: 14rpx;
		overflow: hidden;
		font-size: 30rpx;
		color: #333;
	}

	.a-new .b .price {
		display: block;
		text-align: center;
		line-height: 30rpx;
		font-size: 30rpx;
		color: #b4282d;
	}

	.a-popular {
		width: 750rpx;
		height: auto;
		overflow: hidden;
	}

	.a-popular .b .item {
		border-top: 1px solid #d9d9d9;
		margin: 0 20rpx;
		display: inline;
	}

	.a-popular .b .img {
		margin-top: 12rpx;
		margin-right: 12rpx;
		float: left;
		width: 240rpx;
		height: 240rpx;
	}

	.a-popular .b .right {
		float: left;
		height: auto;
		width: 456rpx;
		display: flex;
		flex-flow: row nowrap;
	}

	.a-popular .b .text {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
		height: auto;
		width: 456rpx;
	}

	.a-popular .b .name {
		width: 456rpx;
		display: block;
		color: #333;
		line-height: 50rpx;
		font-size: 30rpx;
	}

	.a-popular .b .desc {
		width: 456rpx;
		display: block;
		color: #999;
		line-height: 50rpx;
		font-size: 25rpx;
	}

	.a-popular .b .price {
		width: 456rpx;
		display: block;
		color: #b4282d;
		line-height: 50rpx;
		font-size: 33rpx;
	}

	.a-topic .b {
		height: 533rpx;
		width: 750rpx;
		padding: 0 0 48rpx 0;
	}

	.a-topic .b .list {
		height: 533rpx;
		width: 750rpx;
		white-space: nowrap;
	}

	.a-topic .b .item {
		display: inline-block;
		height: 533rpx;
		width: 680.5rpx;
		margin-left: 30rpx;
		overflow: hidden;
	}

	.a-topic .b .item:last-child {
		margin-right: 30rpx;
	}

	.a-topic .b .img {
		height: 387.5rpx;
		width: 680.5rpx;
		margin-bottom: 30rpx;
	}

	.a-topic .b .np {
		height: 35rpx;
		margin-bottom: 13.5rpx;
		color: #333;
		font-size: 30rpx;
	}

	.a-topic .b .np .price {
		margin-left: 20.8rpx;
		color: #b4282d;
	}

	.a-topic .b .desc {
		display: block;
		height: 30rpx;
		color: #999;
		font-size: 24rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.good-grid {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		background: #fff;
		margin-top: 20rpx;
	}

	.good-grid .h {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		height: 130rpx;
		font-size: 33rpx;
		color: #333;
	}

	.good-grid .b {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		padding: 0 20rpx;
	}

	.good-grid .b .item {
		display: block;
		float: left;
		width: 345rpx;
		margin-bottom: 30rpx;
		height: auto;
		overflow: hidden;
		text-align: center;
	}

	.good-grid .b .item:nth-child(2n + 1) {
		margin-right: 20rpx;
	}

	.good-grid .item .img {
		width: 345rpx;
		height: 345rpx;
		background: #f8f8f8;
		margin-bottom: 10rpx;
	}

	.good-grid .item .name {
		width: 100%;
		overflow: hidden;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333;
	}

	.good-grid .item .price {
		width: 100%;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		font-size: 30rpx;
		color: #b4282d;
	} */
</style>
